<template>
	<view class="p-[20rpx] bg-white rounded-[16rpx] flex items-start justify-between">
		<view class="flex-1">
			<view class="text-[30rpx] flex items-center justify-between" @click="chooseAddress">
				<view class="font-bold maxWidth" v-if="params.type === 0">
					<text v-if="shop">{{ shop?.name }}</text>
					<text v-else>请选择自提点</text>
				</view>
				<view class="font-bold maxWidth" v-if="params.type === 1 || params.type === 2">
					<text v-if="address">{{ address.province }} {{ address.city }} {{ address.area }} {{ address.addressDetail }}</text>
					<text v-else>请选择地址</text>
				</view>
				<up-icon name="arrow-right" color="#333" size="16"></up-icon>
			</view>
			<view class="mt-[16rpx]" v-if="params.type === 0 && shop">
				<text class="text-[24rpx] text-gray" v-if="params.type === 0">距您{{ Number(shop.distance).toFixed(2) }}m</text>
			</view>
			<view class="mt-[16rpx]" v-if="(params.type === 1 || params.type === 2) && address">
				<text class="text-[22rpx]" v-if="params.type === 1 || params.type === 2">
					<text>{{ address.name }}</text>
					<text>{{ address.phone }}</text>
				</text>
			</view>
		</view>
		<view class="tabs" v-if="params.type !== 2">
			<view class="flex-1 rounded-full transition-all" :class="{ active: params.type === 0 }" @click="toggle(0)">自提</view>
			<view class="flex-1 rounded-full transition-all" :class="{ active: params.type === 1 }" @click="toggle(1)">外送</view>
		</view>
	</view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
onShow(() => {
	uni.$once('chooseAddress', (id) => {
		if (params.value.type === 1 || params.value.type === 2) {
			params.value.address = id;
		}
		if (params.value.type === 0) {
			params.value.shopId = id;
		}
	});
});
const params = defineModel({
	type: Object,
	default: () => {
		return {};
	}
}); // 0自提 1外送
const props = defineProps({
	address: {
		type: Object,
		default: () => {
			return null;
		}
	},
	shop: {
		type: Object,
		default: () => {
			return null;
		}
	}
});
const emit = defineEmits(['change']);
const toggle = (t) => {
	if (params.value.type === t) return;
	params.value.type = t;
	emit('change', t);
};
const chooseAddress = () => {
	if (params.value.type === 1 || params.value.type === 2) {
		uni.navigateTo({
			url: `/pages/addressManagement/addressManagement?isChoose=${1}`
		});
	}
	if (params.value.type === 0) {
		uni.navigateTo({
			url: `/pages/shopList/shopList?isChoose=${1}`
		});
	}
};
</script>

<style lang="scss" scoped>
.tabs {
	@apply w-[184rpx] h-[44rpx] bg-[#F5F5F5] text-[22rpx] text-center flex rounded-full leading-[44rpx] ml-[24rpx];
	.active {
		@apply bg-second text-white;
	}
}
.maxWidth {
	@apply max-w-[400rpx];
}
</style>
